雖然目前功能是work不過好像還少了一些部份。
當客戶按下“添加”按鈕時，實際上並沒有任何視覺反饋。它似乎什麼也沒做。
通常是否可以出現某種簡單的消息，表明該商品已添加到購物車中？

其次，我們認為最好在查看購物車時顯示每件商品的總數量。
因此，每個產品一條線，以及反映客戶將該產品添加到購物車的次數的總數量。

客戶的視覺反饋在這裡非常簡單。
也許從添加項目時僅顯示一些文本開始，它會出現幾秒鐘然後消失。
為此，可能值得探索 javascript 的 setTimeout() 方法；

對於第二個要求，目前最簡單的選擇可能是在任何給定的購物車中為每個產品
存儲一條記錄，並在每次添加該項目時增加數量欄位。
這將使顯示購物車變得非常簡單，因為我們可以
檢索購物車行並使用該數據在屏幕上顯示某些內容。

import React, { Component } from 'react';
import Axios from 'axios';

export default class AddToCart extends Component {

    state = {}

    constructor(props) {
        super(props);

        this.onSubmit = this.onSubmit.bind(this);
    }

    async onSubmit(e) {
        e.preventDefault();        
        let request = { productId: this.props.productId };
        let sessionId = localStorage.sessionId;
        if (sessionId) {
            request.sessionId = sessionId;
        }
        let result = await Axios.post('/api/cart', request);
        localStorage.sessionId = result.data.sessionId;
        this.setState({ itemJustAdded: true });
        setTimeout(() => this.setState({ itemJustAdded: false }), 6000);
    }

    render() {
        return <form onSubmit={this.onSubmit}>
            <div className="form-row">
                <div className="form-group">
                    <button className="btn btn-primary form-control" type="submit">
                        Add to Cart
                    </button>
                </div>
            </div>
            {this.state.itemJustAdded && <span className="alert alert-primary">Item added to cart</span>}
        </form>;
    }

}